<template>
  <div id="app">
    <div class="container">
      <div class="row">
        <div
          class="col-md-8 col-md-offset-2"
          v-for="booklistData in sortListDatas"
          :key="booklistData.id"
        >
          <!-- 1.父传子以属性的形式绑定到子组件身上 -->
          <!-- 2.父组件接受子组件属性--绑定$emit事件名 -->
          <book-com :bookitem="booklistData" @addEvent="addVotesFun"></book-com>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { datalists } from "./mock/datalists";
import BookCom from "./components/BookCom.vue";
export default {
  name: "App",
  components: { BookCom },
  data() {
    return {
      booklistDatas: [],
    };
  },
  // 初始化页面数据
  created() {
    this.booklistDatas = datalists;
  },
  computed: {
    sortListDatas() {
      return this.booklistDatas.sort(function (a, b) {
        return b.votes - a.votes;
      });
    },
  },
  methods: {
    // 接受传递的id值,找到数据,并将点赞数++
    addVotesFun(id) {
      var targetdata = this.booklistDatas.find((item) => {
        return item.id == id;
      });
      console.log(targetdata);
      targetdata.votes++;
    },
  },
};
</script>

<style>
</style>
